/**
 * 编程式导航
 */

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class Login extends React.Component {
  handleLogin = () => {
    console.log("登录成功");
    // 想跳转成功页面 ？？
    this.props.history.push("/home");
  };

  render() {
    return (
      <div>
        输入用户名和密码后登录
        <button onClick={this.handleLogin}>登录</button>
      </div>
    );
  }
}

class Home extends React.Component {
  handleLogout = () => {
    console.log("登出");
    // 回到首页
    this.props.history.go(-2);
  };

  render() {
    return (
      <div>
        你已经登录成功，开心吧。
        <button onClick={this.handleLogout}>登出</button>
      </div>
    );
  }
}

// 默认路由组件
class Welcome extends React.Component {
  render() {
    return (
      <div>
        页面广告和说明，想看更多内容请登录
        <Link to="/login">点击这里到达登录页面</Link>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          {/* 下面的内容用默认路由匹配 */}
          <Route path="/" component={Welcome} />
          <Route path="/login" component={Login} />
          <Route path="/home" component={Home} />
        </div>
      </Router>
    );
  }
}

export default App;
